<template>
  <div id="app">
    <header>
      <p>余额：¥665,254.00</p>
      <div class="portrait">
        <img src="../../../assets/images/portrait.png" alt="">
      </div>
      <h4>普通用户</h4>
      <ly-tab
        v-model="selectedId"
        :items="items"
        :options="options" @change="_handleChange">
      </ly-tab>
    </header>
    <div class="equities">
      <h1 class="baseColor">{{user}}享受以下权益</h1>
      <ul>
        <li v-for="item in specification">{{item.lable}} <span>{{item.weight}}</span></li>
      </ul>
    </div>
    <a class="btn">开通体验用户</a>
  </div>
</template>

<script>
  import Vue from 'vue'
  import LyTab from 'ly-tab'
  Vue.use(LyTab)
  export default {
    name: "member",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
    data () {
      return {
        selectedId: 0,
        items: [
          {label: '普通用户'},
          {label: '体验用户'},
          {label: '券用户'},
          {label: '一级会员'},
          {label: '二级会员'},
          {label: '三级会员'},
        ],
        options: {
          activeColor: '#fff',
        },
        user:'普用户',
        specification:[
          {lable:'累计预订/回购最大金额',weight:'￥10000'},
          {lable:'黄金单笔可预订最大克重',weight:'100g'},
          {lable:'白银单笔可预订最大克重',weight:'5000g'},
          {lable:'黄金可预订最大规格',weight:'100g'},
          {lable:'白银可预订最大规格',weight:'5000g'},
        ]
      }
    },
    methods:{
      _handleChange (item, index) {
       this.user = item.label;
      }
    }
  }
</script>

<style lang="less" scoped>
  #app {
    header {
      height: 9rem;
      background: #ff9500;
      box-sizing: border-box;
      padding: 1.36rem 0.5rem 0;
      p {
        font-size: 0.554rem;
        color: #fff;
      }
      .portrait {
        border-radius: 50%;
        width: 2.794rem;
        margin: 0 auto 0.5rem;
      }
      h4 {
        font-size: 0.64rem;
        text-align: center;
        color: #fff;
        font-weight: normal;
        line-height: 1.8rem;
      }
    }
    .equities {
      background: #fff;
      h1 {
        font-size: 0.597rem;
        text-align: center;
        font-weight: normal;
        line-height: 1.92rem;
      }
      ul {
        border-top: 1px solid #dcdcdc;
        border-bottom: 1px solid #dcdcdc;
        padding: 0 0.5rem;
        li {
          font-size: 0.512rem;
          line-height: 1.92rem;
          border-bottom: 1px solid #dcdcdc;
          &:last-child{
            border: 0;
          }
          span {
            float: right;
          }
        }
      }

    }
    .btn {
      margin: 1.5rem 0.5rem;
    }

  }
</style>
